<template>
  <div class="class">
    <Choose></Choose>
    <div class="nav">
      <router-link to="/class/sort_1" class="list">综合排序</router-link>
      <router-link to="/class/sort_2" class="list">最新上架</router-link>
      <router-link to="/class/sort_3" class="list">热度排序</router-link>
      <router-link to="/class/sort_4" class="list">价格排序</router-link>
      <div class="list">
        <Kongzhi></Kongzhi>
        <!-- &nbsp; -->
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
import Choose from '@/components/class/choose'
import Kongzhi from '@/components/class/kongzhi'
export default{
  name: 'Class',
  data () {
    return {
      drawer: false,
    }
  },
  components: {
    Choose,
    Kongzhi
  }
}
</script>
<style scoped lang="less">
  .class{
    padding-bottom: 50px;
    .nav{
      display: flex;
      a.list{
        display: inline-block;
        width: 20%;
        height: 30px;
        line-height: 30px;
        // border: 1px solid red;
        text-align: center;
        font-size: 0.8em;
      }
      div.list{
        // border: 1px solid red;
        width: 16%;
        height: 30px;
        line-height: 30px;
        font-size: 0.8em;
        div.kongzhi{
          display: inline-block;
        }        
        img{
          width: 12px;
        }
      }
      .router-link-active{
        font-weight: bold;
        background-image: url(../assets/img/class/PxJt.png);
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 8px;
      }
    }
  }
</style>